<template>
  <div>
    <vue-particles
      id="tsparticles"
      :options="{
        background: {
          color: {
            value: '#0d47a1',
          },
        },
        fpsLimit: 120,
        interactivity: {
          events: {
            onClick: {
              enable: true,
              mode: 'push',
            },
            onHover: {
              enable: true,
              mode: 'repulse',
            },
          },
          modes: {
            bubble: {
              distance: 400,
              duration: 2,
              opacity: 0.8,
              size: 40,
            },
            push: {
              quantity: 4,
            },
            repulse: {
              distance: 200,
              duration: 0.4,
            },
          },
        },
        particles: {
          color: {
            value: '#ffffff',
          },
          links: {
            color: '#ffffff',
            distance: 150,
            enable: true,
            opacity: 0.5,
            width: 1,
          },
          move: {
            direction: 'none',
            enable: true,
            outModes: 'bounce',
            random: false,
            speed: 6,
            straight: false,
          },
          number: {
            density: {
              enable: true,
            },
            value: 80,
          },
          opacity: {
            value: 0.5,
          },
          shape: {
            type: 'circle',
          },
          size: {
            value: { min: 1, max: 5 },
          },
        },
        detectRetina: true,
      }"
    />
  </div>
  <div class="formContainer">
    <h3>企业门户网站管理系统</h3>
    <el-form
      ref="loginFormRef"
      style="max-width: 600px"
      :model="loginForm"
      status-icon
      :rules="loginRules"
      label-width="auto"
      class="loginForm"
    >
      <el-form-item label="用户名" prop="user_name" class="custom-label">
        <el-input
          v-model="loginForm.user_name"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password" class="custom-label">
        <el-input
          v-model="loginForm.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item class="button-container">
        <el-button type="primary" @click="submitForm()" class="custom-button">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import { ElMessage } from "element-plus";

import { useUserStore } from "@/stores/userStore";
import { useRouteStore } from "@/stores";
//全局设置baseurl
axios.defaults.baseURL = "http://localhost:3000";

//使用pinia state状态
const userStore = useUserStore();
const routeStore = useRouteStore();
//表单绑定的响应式对象
const loginForm = reactive({
  user_name: "",
  password: "",
});

const loginRules = reactive({
  user_name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
//表单绑定的引用对象
const loginFormRef = ref();

const router = useRouter();
//提交表单函数
const submitForm = () => {
  //1.校验表单
  loginFormRef.value.validate((valid) => {
    if (valid) {
      // console.log(loginForm);
      axios
        .post("/adminapi/user/login", loginForm)
        .then((res) => {
          if (res.data.code === 0) {
            // console.log(res.data.result.data);
            userStore.changeUserInfo(res.data.result.data);
            routeStore.isGetterRouter = false;
            router.push("/index");
          }
        })
        .catch((error) => {
          // 错误处理逻辑
          if (error.response) {
            // 服务器返回了非 2xx 状态码 error.response存在
            const { status, data } = error.response;
            if (status === 500) {
              if (data.code === "10004") {
                ElMessage.error("用户名不存在");
              } else if (data.code === "10006") {
                ElMessage.error("用户名或密码错误");
              } else {
                console.log("登录过程中出现错误，请稍后重试");
              }
            }
          } else if (error.request) {
            // 请求已发送，但没有收到响应
            console.log("请求已发送，但没有收到响应");
          } else {
            // 在设置请求时发生错误
            console.log("设置请求时发生错误:", error.message);
          }
        });
    }
  });
  //2.拿到表单内容

  //3.设置token
};

// const handleLogin = () => {
//   localStorage.setItem("token", "xiaoji");
// };
</script>

<style scoped>
.formContainer {
  width: 500px;
  height: 300px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  padding: 20px;

  h3 {
    font-size: 30px;
  }
  .loginForm {
    margin-top: 20px;
  }
  .button-container {
    text-align: center;
  }

  .custom-button {
    background-color: #007bff;
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 5px;
  }
}

:deep .custom-label .el-form-item__label {
  color: white;
}
</style>
